<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader
                hidden-breadcrumb
                :tab-list="tabList"
                :tab-active-key="tabActiveKey"
                @on-tab-change="handleChangeTab"
                >
            </PageHeader>
        </div>
        <Card :bordered="false" dis-hover>
         <Form inline class="ivu-mb-16" :label-width="100">
         <FormItem class="ivu-mb-0" label="挂号时间：">
        <DatePicker type="daterange" v-width="'100%'" :value="day" format="yyyy/MM/dd" v-model="date" placeholder="请选择挂号时间" element-id="date" />
        </FormItem>
         <FormItem class="ivu-mb-0" label="来院时间：">
        <DatePicker type="daterange" v-width="'100%'" :value="day" format="yyyy/MM/dd" v-model="date1" placeholder="请选择来院时间" element-id="date" />
        </FormItem>
        <FormItem class="ivu-mb-0" label="病种：">
        <Select v-width="100" >
          <Option value="白癜风">白癜风</Option>
          <Option value="非白">非白</Option>
          <Option value="皮杂">皮杂</Option>
        </Select>
        </FormItem>
        <FormItem class="ivu-mb-0" label="诊室：">
        <Select v-width="100">
          <Option value="一诊">一诊</Option>
          <Option value="二诊">二诊</Option>
          <Option value="三诊">三诊</Option>
        </Select>
        </FormItem>
        </Form>
            <reportList :article-list="articleList" />
        </Card>
    </div>
</template>
<script>
    import mixin from '../mixins';
    import dataList from './data';
    import reportList from './list';
    export default {
        mixins: [mixin],
        components: { reportList },
        data () {
            return {
                tabActiveKey: 'constitute',
                type: [],
                loading: false,
                articleList: [],
                date: '',
                date1: '',
                day: ['2016-01-01', '2016-02-15']
            }
        },
        methods: {
            getArticle () {
                this.loading = true;
                setTimeout(() => {
                    this.articleList = this.articleList.concat(dataList);
                    this.loading = false;
                }, 1000)
            }
        },
        mounted () {
            this.getArticle();
        }
    }
</script>
